<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>填写地址</title>
		<script src="__PUBLIC__/Product/js/lib/flexible.js"></script>
		<style>
			*{
	            margin: 0;
	            padding: 0;
	            border: 0;
	            outline: 0;
	        }
	        /* 外圈盒子 */
	        .adress_box{
	            width: 10.0rem;
	            position: relative;
	        }
	        body{
	            background-color: #f4f4f4;
	        }
	        /* 头部 */
	        .adress_header{
	            width: 100%;
	            height: 1rem;
	            background: linear-gradient(to right, #6951bc, #a163e0);
	            position: relative;
	            margin-bottom: 0.013333rem;
	        }
	        .adress_header img{
	            width: 0.226667rem;
	            height: 0.453333rem;
	            position: absolute;
	            bottom: 0.26rem;
	            left: 0.266667rem;
	        }
	        .adress_header p{
	            font-size: 0.48rem;
	            line-height: 1rem;
	            text-align: center;
	            color: white;
	        }
	        .adress_content{
	        	padding-top: 0.13333333rem;
	        }
	        .adress_content .common{
	        	width: 9.46666666rem;
	        	padding: 0 0.26666666rem;
	        	background-color: white;
	        	height: 1.25333333rem;
	        	display: flex;
	        	border-bottom: 0.01333333rem solid #f4f4f4;
	        }
	        .common .common_lt{
	        	width: 1.86666666rem;
	        	line-height: 1.25333333rem;
	        	font-size: 0.34666666rem;
	        }
	        .common .common_rt{
	        	width: 7.33333333rem;
	        	padding-left: 0.26666666rem;
	        	line-height: 1.25333333rem;
	        }
	        .common .common_rt input{
	        	width: 100%;
	        	height: 0.4rem;
	        	font-size: 0.34666666rem;
	        	color: #999999;
	        }
	        .adress_content .detail_adress{
	        	height: 2.50666666rem;
	        }
	        .common .detail_adress_rt{
	        	width: 7.33333333rem;
	        	padding-left: 0.26666666rem;
	        	height: 2.50666666rem;
	        }
	        .detail_adress_rt textarea{
	        	width: 100%;
	        	height: 2.04rem;
	        	padding-top: 0.46666666rem;
	        	color: #999999;
	        	overflow:hidden; 
	        	resize:none;
	        	font-size: 0.34666666rem;
	        }
	        button{
	        	width: 9.46666666rem;
	        	height: 1.14666666rem;
	        	background: linear-gradient(to right, #6951bc, #a163e0);
	        	font-size: 0.4rem;
	        	color: white;
	        	border-radius: 0.08rem;
	        	margin-top: 0.69333333rem;
	        	margin-left: 0.26666666rem;
	        }
	        div.picker-choose.choose-hook{
	        	font-size: 0.34666666rem !important;
	        	line-height: 1.33333333rem;
	        }
	        div.picker-choose.choose-hook span{
	        	padding-top: 0 !important;
	        	padding-bottom: 0 !important;
	        	vertical-align: top;
	        	top: 0 !important;
	        }
	        h1.picker-title{
	        	font-size: 0.37333333rem !important;
	        }
	        li.wheel-item{
	        	font-size: 0.34666666rem !important;
	        }
		</style>
	</head>
	<body>
		<div class="adress_box">
	        <!-- 头部 -->
	        <div class="adress_header">
	            <img src="__PUBLIC__/Product/img/fanhui.png" alt="返回">
	            <p>添加地址</p>
	        </div>
	        <!-- 内容 -->
	        <div class="adress_content">
	        	<div class="common addressee">
	        		<div class="common_lt">收件人:</div>
	        		<div class="common_rt">
	        			<input type="text" value="" placeholder="请输入姓名..."/>
	        		</div>
	        	</div>
	        	<div class="common telphone">
	        		<div class="common_lt">手机号:</div>
	        		<div class="common_rt">
	        			<input type="number" maxlength="11" value="" placeholder="请输入手机号码..."/>
	        		</div>
	        	</div>
	        	<div class="common area">
	        		<div class="common_lt">选择地区:</div>
	        		<div class="common_rt">
	        			<input id="area" type="text" onfocus="this.blur()" value="" placeholder="请选择省市区..."/>
	        		</div>
	        	</div>
	        	<div class="common detail_adress">
	        		<div class="common_lt">详细地址:</div>
	        		<div class="detail_adress_rt">
	        			<textarea name="" placeholder="请输入详细地址..."></textarea>
	        		</div>
	        	</div>
	        	<button>确定</button>
	        </div>
		</div>
	</body>
</html>
<script src="__PUBLIC__/Product/js/lib/URl.js"></script>
<script src="__PUBLIC__/Product/js/lib/picker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__PUBLIC__/Product/js/lib/ciry.js" type="text/javascript" charset="utf-8"></script>
<script src="__PUBLIC__/Product/js/lib/jquery3.2.1.js"></script>
<script>
	var nameEl = document.getElementById('area');
	var first = []; /* 省，直辖市 */
	var second = []; /* 市 */
	var third = []; /* 镇 */
	var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */
	var checked = [0, 0, 0]; /* 已选选项 */
	function creatList(obj, list) {
		obj.forEach(function(item, index, arr) {
			var temp = new Object();
			temp.text = item.name;
			temp.value = index;
			list.push(temp);
		})
	}
	creatList(city, first);
	if(city[selectedIndex[0]].hasOwnProperty('sub')) {
		creatList(city[selectedIndex[0]].sub, second);
	} else {
		second = [{
			text: '',
			value: 0
		}];
	}
	if(city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
		creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
	} else {
		third = [{
			text: '',
			value: 0
		}];
	}
	setTimeout(function(){
		var wheelDiv = $('.wheel');
		console.log(wheelDiv);
		if (wheelDiv.eq(0).find('li[data-val=0]').text() == '北京市') {
			
		}
	},1000);
	var picker = new Picker({
		data: [first, second, third],
		selectedIndex: selectedIndex,
		title: '地址选择'
	});
	picker.on('picker.select', function(selectedVal, selectedIndex) {
		var text1 = first[selectedIndex[0]].text;
		var text2 = second[selectedIndex[1]].text;
		var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
		nameEl.value = text1 + ' ' + text2 + ' ' + text3;
	});
	picker.on('picker.change', function(index, selectedIndex) {
		if(index === 0) {
			firstChange();
		} else if(index === 1) {
			secondChange();
		}
		function firstChange() {
			second = [];
			third = [];
			checked[0] = selectedIndex;
			var firstCity = city[selectedIndex];
			if(firstCity.hasOwnProperty('sub')) {
				creatList(firstCity.sub, second);
				var secondCity = city[selectedIndex].sub[0];
				if(secondCity.hasOwnProperty('sub')) {
					creatList(secondCity.sub, third);
				} else {
					third = [{
						text: '',
						value: 0
					}];
					checked[2] = 0;
				}
			} else {
				second = [{
					text: '',
					value: 0
				}];
				third = [{
					text: '',
					value: 0
				}];
				checked[1] = 0;
				checked[2] = 0;
			}
			picker.refillColumn(1, second);
			picker.refillColumn(2, third);
			picker.scrollColumn(1, 0);
			picker.scrollColumn(2, 0);
		}
		function secondChange() {
			third = [];
			checked[1] = selectedIndex;
			var first_index = checked[0];
			if(city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
				var secondCity = city[first_index].sub[selectedIndex];
				creatList(secondCity.sub, third);
				picker.refillColumn(2, third);
				picker.scrollColumn(2, 0)
			} else {
				third = [{
					text: '',
					value: 0
				}];
				checked[2] = 0;
				picker.refillColumn(2, third);
				picker.scrollColumn(2, 0)
			}
		}
	});
	picker.on('picker.valuechange', function(selectedVal, selectedIndex) {
		console.log(selectedVal);
		console.log(selectedIndex);
	});
	nameEl.addEventListener('click', function() {
		picker.show();
	});
</script>